<template>
<!-- 图文模块 -->
    <div class="control-box" :style="[ styles ]">
        <div class="image_text">
            <div class="module_title" v-if="!title.s && base.s == 0">
                <div class="l">
                    <CText :text="title" fontNum="18"/>
                </div>
            </div>
            <div :class="`module module_${base.s}`">
                <div class="box">
                    <img :src="content.img.i || content.img.p" alt="">
                    <div class="box-b-txt">
                        <p class="p ellipsis ellipsis-2" :style="[ style ]">{{content.text.t}}</p>
                    </div>
                </div>
                
                <div class="box-2">
                    <div class="title" v-if="!title.s">
                        <CText :text="title" fontNum="18"/>
                    </div>
                    <p class="p ellipsis ellipsis-2" :style="[ style ]">{{content.text.t}}</p>
                </div>
                <ModuleBg :base="base"/>
            </div>
        </div>
        
        <Swap :index="index" />
    </div>
</template>

<script>
import props from '@/mixin/props.js'
export default {
    props:{
        content:{
            type: Object,
            required: true
        },
        title: {
            type: Object,
            required: true
        }
    },
    mixins:[ props ],
    data() {
        return {
            
        }
    },
    computed: {
        style(){
            let style = {}, text = this.content.text
            text.d && (
                style.color = text.c,
                style.fontSize = text.f+'px',
                style.lineHeight = text.f + 6 +'px',
                text.i && (style.fontStyle = 'italic'),
                text.b && (style.fontWeight = 'bold'),
                text.u && (style.textDecoration = 'underline')
            )
            return style
        },
    }
}
</script>

<style lang="scss" scoped>
.image_text{position: relative;z-index: 2;
    .module_title{height: 50px;background: #ffffff;padding: 0 15px;display: flex;justify-content: space-between;align-items: center;
        .l{flex: 1;}
    }
    .module{padding: 15px;position: relative;
        &_0{padding: 0 !important;}
        &_1{
            .box-b-txt{display: none !important;}
            .box-2{display: block !important;}
        }
        .box{position: relative;z-index: 2;height: 195px;
            .box-b-txt{position: absolute;bottom: 0;left: 0;right: 0;background: rgba($color: #000000, $alpha: .3);color: #fff;padding: 10px 5px;font-size: 12px;line-height: 18px}
        }
        .box-2{position: relative;z-index: 2;display: none;
            .title{margin-top: 15px}
            .p{margin-top: 15px;font-size: 12px;line-height: 18px}
        }
    }
}
</style>

